<template>
    <!--面包屑导航-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>工装夹具管理</el-breadcrumb-item>
                <el-breadcrumb-item>工装夹具台账</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
    </el-row>
    <!--查询条件区-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-form v-model="searchFixture" style="margin: 15px 0px 0px 0px" inline>
                <el-form-item style="width: 300px;" label="设备编码">
                    <el-input v-model="searchFixture.fixtureId"/>
                </el-form-item>
                <el-form-item style="width: 300px;" label="设备名称">
                    <el-input v-model="searchFixture.fixtureName"/>
                </el-form-item>
                <!--项目状态设置-->
                <el-form-item label="设备类型">
                    <el-select placeholder="全部" style="width: 200px;" v-model="searchFixture.fixtureTypeId">
                        <template v-for="fixtureType in fixtureTypeColumnList">
                            <el-option :label="fixtureType.fixtureTypeName" :value="fixtureType.fixtureTypeId"/>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item style="width: 300px;" label="设备品牌">
                    <el-input v-model="searchFixture.fixtureBrand"/>
                </el-form-item>
                <el-form-item style="width: 300px;" label="设备型号">
                    <el-input v-model="searchFixture.fixtureModel"/>
                </el-form-item>
                <el-form-item>
                    <el-button @click="search" type="primary">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="cleanSearch">重置</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="exportFixture" type="success">导出</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
    <!--按钮功能区-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-button-group>
                <el-button @click="insert" type="primary" plain>
                    新增
                </el-button>
                <el-button @click="update(selectIdList)" :disabled="selectIdList.length != 1" type="success" plain>
                    修改
                </el-button>
                <el-button @click="deleteFList" :disabled="selectIdList.length == 0" type="danger" plain>
                    删除
                </el-button>
            </el-button-group>
        </el-col>
    </el-row>
    <!--表格主体-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-table
                :data="fixtureList"
                broder
                :stripe="true"
                row-key="fixtureTypeId"
                size="small"
                @selection-change="changeChooses"
            >
                <el-table-column align="center" type="selection" width="55"/>
                <el-table-column align="center" width="100" label="设备类型编号">
                    <template #default="scope">
                        <el-link @click="getDescInfo(scope.row.fixtureId)" style="font-size: small" type="primary">{{scope.row.fixtureId}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column width="120" align="center" prop="fixtureName" label="设备名称"/>
                <el-table-column width="80" align="center" prop="fixtureBrand" label="设备品牌"/>
                <el-table-column width="80" align="center" prop="fixtureModel" label="设备型号"/>
                <el-table-column width="120" align="center" prop="fixtureType.fixtureTypeName" label="设备类型"/>
                <el-table-column align="center" prop="fixtureInventoryQuantity" label="库存数量"/>
                <el-table-column align="center" prop="fixtureUseful" label="可用数量"/>
                <el-table-column width="120" align="center" label="保养维护类型">
                    <template #default="scope">
                        <template v-if="scope.row.fixtureType.fixtureTypeType == 1">
                            定期维护
                        </template>
                        <template v-else>
                            按使用次数维护
                        </template>
                    </template>
                </el-table-column>
                <el-table-column width="120" align="center" label="保养维护类型">
                    <template #default="scope">
                        <template v-if="scope.row.fixtureStatus == 1">
                            在库
                        </template>
                        <template v-else-if="scope.row.fixtureStatus == 2">
                            被领用
                        </template>
                        <template v-else-if="scope.row.fixtureStatus == 3">
                            报废
                        </template>
                        <template v-else>
                            维修中
                        </template>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="fixtureNotes" label="保养频率">
                    <template #default="scope">
                        {{scope.row.fixtureType.fixtureTypeRate}} /
                        {{unitList[scope.row.fixtureType.fixtureTypeRateUnit-1].dictDataTag}}
                    </template>
                </el-table-column>
                <el-table-column width="100" align="center" prop="fixtureMaintainTime" label="下次保养时间"/>
                <el-table-column align="center" prop="fixtureNotes" label="设备备注"/>
                <el-table-column width="100" align="center" label="操作">
                    <template #default="scope">
                        <el-row>
                            <el-col :span="12">
                                <el-link @click="update(scope.row.fixtureId)" type="primary">
                                    <el-icon>
                                        <EditPen/>
                                    </el-icon>
                                    修改
                                </el-link>
                            </el-col>
                            <el-col :span="12">
                                <el-link @click="deleteFixture(scope.row.fixtureId)" type="primary">
                                    <el-icon>
                                        <DeleteFilled/>
                                    </el-icon>
                                    删除
                                </el-link>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
    <!--分页-->
    <!--分页栏-->
    <el-row style="margin: 5px 5px;">
        <!-- 监听页码的变化事件 -->
        <el-pagination @change="changePage" :total="total" background layout="prev, pager, next"/>
    </el-row>

    <!--新增弹窗-->
    <el-dialog
        v-model="dialogFixtureInsert"
        title="修改工装夹具"
    >
        <el-form v-model="insertFixture" label-width="auto">
            <el-form-item  label="工具名称">
                <el-input v-model="insertFixture.fixtureName"/>
            </el-form-item>
            <el-form-item label="工具品牌">
                <el-input v-model="insertFixture.fixtureBrand"/>
            </el-form-item>
            <el-form-item label="工具型号">
                <el-input v-model="insertFixture.fixtureModel"/>
            </el-form-item>
            <el-form-item label="设备类型">
                <el-select v-model="insertFixture.fixtureTypeId">
                    <template v-for="fixtureType in fixtureTypeColumnList">
                        <el-option :label="fixtureType.fixtureTypeName" :value="fixtureType.fixtureTypeId"/>
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item label="保养时间">
                <el-date-picker
                    v-model="insertFixture.fixtureMaintainTime"
                    type="datetime"
                    placeholder="请选择下次保养时间"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                />
            </el-form-item>
            <el-form-item label="设备状态">
                <el-select v-model="insertFixture.fixtureStatus">
                    <el-option :value="1" label="在库"/>
                    <el-option :value="2" label="被领用"/>
                    <el-option :value="3" label="报废"/>
                    <el-option :value="4" label="维修中"/>
                </el-select>
            </el-form-item>
            <el-form-item label="库存数量">
                <el-input-number :min="1" v-model="insertFixture.fixtureInventoryQuantity"/>
            </el-form-item>
            <el-form-item label="可用数量">
                <el-input-number :min="1" v-model="insertFixture.fixtureUseful"/>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="insertFixture.fixtureNotes"/>
            </el-form-item>
            <el-form-item>
                <el-button @click="insertFixtureUp()" type="primary">提交</el-button>
                <el-button @click="cancelInsert">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--修改弹窗-->
    <el-dialog
        v-model="dialogFixtureUpdate"
        title="修改工装夹具"
    >
        <el-form v-model="updateFixture" label-width="auto">
            <el-form-item  label="工具名称">
                <el-input v-model="updateFixture.fixtureName"/>
            </el-form-item>
            <el-form-item label="工具品牌">
                <el-input v-model="updateFixture.fixtureBrand"/>
            </el-form-item>
            <el-form-item label="工具型号">
                <el-input v-model="updateFixture.fixtureModel"/>
            </el-form-item>
            <el-form-item label="设备类型">
                <el-select v-model="updateFixture.fixtureTypeId">
                    <template v-for="fixtureType in fixtureTypeColumnList">
                        <el-option :label="fixtureType.fixtureTypeName" :value="fixtureType.fixtureTypeId"/>
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item label="保养时间">
                <el-date-picker
                    v-model="updateFixture.fixtureMaintainTime"
                    type="datetime"
                    placeholder="请选择下次保养时间"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                />
            </el-form-item>
            <el-form-item label="设备状态">
                <el-select v-model="updateFixture.fixtureStatus">
                    <el-option :value="1" label="在库"/>
                    <el-option :value="2" label="被领用"/>
                    <el-option :value="3" label="报废"/>
                    <el-option :value="4" label="维修中"/>
                </el-select>
            </el-form-item>
            <el-form-item label="库存数量">
                <el-input-number :min="1" v-model="updateFixture.fixtureInventoryQuantity"/>
            </el-form-item>
            <el-form-item label="可用数量">
                <el-input-number :min="1" v-model="updateFixture.fixtureUseful"/>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="updateFixture.fixtureNotes"/>
            </el-form-item>
            <el-form-item>
                <el-button @click="updateFixtureUp()" type="primary">提交</el-button>
                <el-button @click="cancelUpdate">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--详情弹窗-->
    <el-dialog
        title="设备详情"
        v-model="dialogFixtureDesc"
    >
        <el-descriptions>
            <el-descriptions-item label="工具编号">{{ descFixture.fixtureId }}</el-descriptions-item>
            <el-descriptions-item label="工具名称">{{ descFixture.fixtureName}}</el-descriptions-item>
            <el-descriptions-item label="工具品牌">{{ descFixture.fixtureBrand}}</el-descriptions-item>
            <el-descriptions-item label="工具型号">{{ descFixture.fixtureModel}}</el-descriptions-item>
            <el-descriptions-item label="工具库存">{{ descFixture.fixtureInventoryQuantity}}</el-descriptions-item>
            <el-descriptions-item label="工具可用数量">{{ descFixture.fixtureUseful}}</el-descriptions-item>
            <el-descriptions-item label="下次保养时间">{{ descFixture.fixtureMaintainTime}}</el-descriptions-item>
            <el-descriptions-item label="工具备注">{{ descFixture.fixtureNotes}}</el-descriptions-item>
            <el-descriptions-item label="工具状态">
                <el-tag v-if="descFixture.fixtureStatus == 1">在库</el-tag>
                <el-tag v-else-if="descFixture.fixtureStatus == 2" type="success">在领用</el-tag>
                <el-tag v-else-if="descFixture.fixtureStatus == 3" type="danger">在领用</el-tag>
                <el-tag v-else type="warning">维修中</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="工具创建时间">{{ descFixture.fixtureCreateTime}}</el-descriptions-item>
            <el-descriptions-item label="工具修改时间">{{ descFixture.fixtureModifyTime}}</el-descriptions-item>

        </el-descriptions>
    </el-dialog>
</template>

<script setup>

import {ArrowRight} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import dict from "@/api/dict.js";
import fixture from "@/api/fixture/fixture.js";
import fixtureType from "@/api/fixture/fixtureType.js";
import {ElMessage, ElMessageBox} from "element-plus";

let dialogFixtureInsert = ref(false)
let dialogFixtureUpdate = ref(false)
let dialogFixtureDesc = ref(false)
let fixtureTypeColumnList = ref([])
let fixtureList = ref([])
let searchFixture = ref({})
let unitList = ref([])
let pageNum = ref(1)
let total = ref(0)
let insertFixture = ref({})
let updateFixture = ref({})
let descFixture = ref({})
let selectIdList = ref([])


function deleteFList(){
    ElMessageBox.confirm(
        '你确定要删除类型吗',
        '删除类型',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'error'
        }
    ).then(() => {
        let success = true;
        selectIdList.value.forEach(id => {
            fixture.deleteFixture(id, res => {
                loadFixtureList()
            })
        })
        ElMessage({
            type: "success",
            message: "删除成功"
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}

function changeChooses(value) {
    let tempIds = new Array();
    value.forEach(fixture => {
        tempIds.push(fixture.fixtureId)
    })
    selectIdList.value = tempIds;
}
function deleteFixture(fixtureId){
    ElMessageBox.confirm(
        '你确定要删除类型吗',
        '类型项目',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'error'
        }
    ).then(() => {
        fixture.deleteFixture(fixtureId, res => {
            if (res.code == 1) {
                ElMessage({
                    type: "success",
                    message: "删除成功"
                })
                loadFixtureList()
            } else {
                ElMessage({
                    type: "error",
                    message: "网络开了小差，请稍后重试"
                })
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}

function updateFixtureUp(){
    fixture.updateFixture(updateFixture.value,res=>{
        if (res.code == 1) {
            ElMessage({
                type: "success",
                message: "跟新成功"
            })
            loadFixtureList()
            cancelUpdate()
        } else if (res.code == 300) {
            ElMessage({
                type: "warning",
                message: "工装夹具名重复"
            })
        } else {
            ElMessage({
                type: "error",
                message: "添加失败"
            })
        }
    })
}

function insertFixtureUp(){
    if (insertFixture.value.fixtureName == undefined || insertFixture.value.fixtureBrand == undefined || insertFixture.value.fixtureModel == undefined || insertFixture.value.fixtureTypeId == undefined || insertFixture.value.fixtureInventoryQuantity == undefined || insertFixture.value.fixtureUseful == undefined || insertFixture.value.fixtureMaintainTime == undefined || insertFixture.value.fixtureStatus == undefined){
        ElMessage({
            type: "error",
            message: "缺少关键元素"
        })
        throw new Error("缺少关键元素")
    }
    fixture.insertFixture(insertFixture.value,res=>{
        if (res.code == 1) {
            ElMessage({
                type: "success",
                message: "添加成功"
            })
            loadFixtureList()
            cancelInsert()
        } else {
            ElMessage({
                type: "error",
                message: "添加失败"
            })
        }
    })
}
function getDescInfo(fixtureId){
    fixture.loadUpdateInfo(fixtureId,res=>{
        descFixture.value = res.data
    })
    dialogFixtureDesc.value = true
}
function cancelUpdate(){
    updateFixture.value = new ref({})
    dialogFixtureUpdate.value = false;
}
function update(fixtureId){
    dialogFixtureUpdate.value = true;
    fixture.loadUpdateInfo(fixtureId,res=>{
        updateFixture.value = res.data
    })
}
function cancelInsert(){
    insertFixture.value = new ref({})
    dialogFixtureInsert.value = false
}
function insert(){
    dialogFixtureInsert.value = true
}

function changePage(value){
    pageNum.value = value
    loadFixtureList()
}

function cleanSearch(){
    searchFixture.value = new ref({})
    loadFixtureList()
}

function search(){
    loadFixtureList()
}

function exportFixture(){
    fixture.exeExport(searchFixture.value,pageNum.value,10,res=>{
        if (res.code == 200){
            ElMessage({
                type:"success",
                message:"导出成功"
            })
        }else {
            ElMessage({
                type:"error",
                message:"导出失败"
            })
        }
    })
}
function loadFixtureList(){
    fixture.loadFixtureList(searchFixture.value,pageNum.value,10,res=>{
        fixtureList.value = res.list
        total.value = res.total
    })
}



function loadDictData(dictId,callback){
    dict.loadDictDataList(dictId,res=>{
        callback(res.data)
    })
}

onMounted(()=>{
    loadFixtureList()
    loadDictData(4,res=>{
        unitList.value = res
    })
    fixtureType.loadAllColumn(res=>{
        fixtureTypeColumnList.value = res.data
    })
})
</script>

<style scoped>

</style>